<template>
  <div class="newsinfo">
    <h2>新闻详情</h2>
    <p>{{this.$route.params.title}}</p>
    <div v-html="newsinfo.content"></div>
  </div>
</template>

<script>
// import { async } from 'q';
import axios from 'axios';

export default {
  mounted(){
    // this.$toast.error('数据请求成功！')
    // this.$toast.success('数据请求成功！')
    // this.$toast.show('数据请求成功！')
    this.$nextTick(() => {  //加载中的效果，可自定义
      this.$nuxt.$loading.start()
      setTimeout(() => this.$nuxt.$loading.finish(), 2000)
    })
  },
  validate({params}){   //校验路由的参数
    return /^\d+$/.test(params.id)
  },
  // transition:'test',     //单独的路由切换动画
  async asyncData (ctx) {    //服务端异步获取数据,访问不到this，只会在服务端调用
    let { data } = await axios.get(`http://www.xyfight.com/api/getnew?id=${ctx.params.id}`)
    // console.log(ctx.app);   
    return { newsinfo: data.message[0] }
  },
  head(){   //自定义meta头部信息
    return{
      title: this.$route.params.title,
      meta:[
        {hid:'description',name:'news',content:'this is a new page'}
      ]
    }
  },
  data(){
    return{
    }
  }
}
</script>

<style>

</style>